<template>
  <div>
    <x-header :left-options ="{showBack: false}">
      <a slot="left" href="">
        <!-- <img src="../../static/images/img2.jpg" alt=""> -->
        <x-img class="header-photo" src="../../static/images/img2.jpg"></x-img>
      </a>
      <a slot="right" href="">
        <x-icon slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
        <x-icon slot="overwrite-left" type="ios-search-strong" size="30" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
      </a>
    </x-header>
    <div class="head">
      <grid>
        <grid-item>
          <div class="read-time">11</div>
          <div class="active">
            <x-circle percent="30" :stroke-width="2" stroke-color="#04BE02">
              <span>34</span>
            </x-circle>
          </div>
          <p>本周阅读时长/分钟</p>
        </grid-item>
      </grid>
    </div>

  </div>
</template>

<script>
import { XHeader, XImg, Grid, GridItem, XCircle } from 'vux'
import * as api from '../api/api'
import { mapState } from 'vuex'
export default {
  components: {
    XHeader,
    XImg,
    Grid,
    GridItem,
    XCircle
  },
  data () {
    userName // 员工姓名
  },
  computed: mapState({
    count: state => state.count
  }),
  methods: {},
  created () {
    api.getData().then(json => {
      console.log(json)
    })
  }
}
</script>
<style lang="less" scoped>
@blue: #3499ff;
@white: #fff;
@images: "../../static/images";
.header-photo {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.head {
  background: url("@{images}/bg_top.jpg") no-repeat;
  background-size: cover;
  .read-time {
    position: relative;
    font-size: 4rem;
  }
  .active {
    position: absolute;
    width:80px;
    height:80px;
  }
  p {
    color: @white;
  }
}
</style>
